<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>ImageUploader事件demo</title>
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js" charset="utf-8"></script>
</head>
<body>
<div class="grid">
    <input class="g-u" id="J_UploaderBtn2" name="Filedata" type="image-uploader" value="上传图片"
           action="upload.php" urlsInputName="imageUrls2" maxSize="500" max="4">
    <input type="hidden" name="imageUrls2">
</div>
<ul id="J_UploaderQueue2" class="grid">

</ul>
<div id="J_Panel" class="event-panel" style="margin-top: 20px;">

</div>
<script type="text/javascript">
    var S = KISSY;
    //包路径，实际使用请直接配置为"http://a.tbcdn.cn/s/kissy/"
    var path = S.Config.debug && "../../../../../../" || "http://a.tbcdn.cn/s/kissy/";
    S.config({
        packages:[
            {
                name:"gallery",
                path:path,
                charset:"utf-8"
            }
        ]
    });
    var $ = S.Node.all;

    /**
     * 向事件面板添加消息
     * @param evt
     * @param msg
     */
    function addMsg(evt, msg) {
        var $ = S.Node.all;
        var $panel = $("#J_Panel");
        var text = "<p>事件名称：" + evt.type + "，" + msg + "</p>";
        $panel.append(text);
        S.log(text);
    }

    KISSY.use('gallery/form/1.3/uploader/imageUploader', function (S, ImageUploader) {
        var imageUploader2 = new ImageUploader('#J_UploaderBtn2', '#J_UploaderQueue2');
        imageUploader2.on('render', function (ev) {
            addMsg(ev, '上传组件准备就绪！');
        });
        imageUploader2.on('select', function (ev) {
            var files = ev.files;
            addMsg(ev, '选择了' + files.length + '个文件');
        });
        imageUploader2.on('start', function (ev) {
            var index = ev.index, file = ev.file;
            addMsg(ev, '开始上传,文件名：' + file.name + '，队列索引为：' + index);
        });
        imageUploader2.on('progress', function (ev) {
            var file = ev.file, loaded = ev.loaded, total = ev.total;
            addMsg(ev, '正在上传,文件名：' + file.name + '，大小：' + total + '，已经上传：' + loaded);
        });
        imageUploader2.on('success', function (ev) {
            var index = ev.index, file = ev.file;
            //服务器端返回的结果集
            var result = ev.result;
            addMsg(ev, '上传成功,服务器端返回上传方式：' + result.type);
        });
        imageUploader2.on('complete', function (ev) {
            var index = ev.index, file = ev.file;
            //服务器端返回的结果集
            var result = ev.result;
            addMsg(ev, '上传结束,服务器端返回上传状态：' + result.status);
        });
        imageUploader2.on('error', function (ev) {
            var index = ev.index, file = ev.file;
            //服务器端返回的结果集
            var result = ev.result;
            addMsg(ev, '上传失败,错误消息为：' +result.msg);
        });
        imageUploader2.on('add',function(ev){
            var queue = ev.queue;
            var file = ev.file;
            addMsg(ev, '队列添加文件！文件名为：'+file.name);
        });
        imageUploader2.on('remove',function(ev){
            var queue = ev.queue;
            addMsg(ev, '队列删除文件！文件索引值：'+ev.index);
            alert('队列中的文件数为：'+queue.get('files').length);
        });
        imageUploader2.render();
    })

</script>

</body>
</html>
